<template>
  <div class="chat-room">
    <el-scrollbar>
      <ul class="user_list">
        <li class="cursor_pointer selected_none" v-for="(message,index) in messageList" :key="index">
          <div class="room-card" v-if="message.group_id"
            :class="{ 'room-active': (currentChat && currentChat.group_id === message.group_id) }"
            @click="changeActiveRoom(message,'group')">
            <el-badge class="user_head_badge" :value="message.unread" :hidden="!message.unread" :max="99">
              <div class="user_head">
                <img :src="message.group_avatar" />
              </div>
            </el-badge>
            <div class="user_text">
              <p class="user_name">
                {{ message.group_name }}
              </p>
              <div class="user_message" v-if="message.message">
                <p v-if="message.chat_type === 0" v-html="message.message">
                </p>
                <p class="image" v-else-if="message.chat_type === 1">
                  [图片]
                </p>
                <p class="image" v-else-if="message.chat_type === 2">
                  [文件]
                </p>
                <p class="image" v-else-if="message.chat_type === 3">
                  [音乐]
                </p>
              </div>
            </div>
            <div class="user_time">
              {{ renderMessageDate(message.message_time) }}
            </div>
          </div>
          <div class="room-card" v-else
            :class="{ 'room-active':  (currentChat && !currentChat.group_id && currentChat.user_id === message.user_id) }"
            @click="changeActiveRoom(message,'friend')">
            <el-badge class="user_head_badge" :value="message.unread" :hidden="!message.unread" :max="99">
              <div class="user_head">
                <img :src="message.avatar" />
              </div>
            </el-badge>
            <div class="user_text">
              <p class="user_name">
                {{ message.user_alias }}
              </p>
              <div class="user_message" v-if="message.message">
                <p v-if="message.chat_type === 0" v-html="message.message">
                </p>
                <p class="image" v-else-if="message.chat_type === 1">
                  [图片]
                </p>
                <p class="image" v-else-if="message.chat_type === 2">
                  [文件]
                </p>
                <p class="image" v-else-if="message.chat_type === 3">
                  [音乐]
                </p>
              </div>
            </div>
            <div class="user_time">
              {{ renderMessageDate(message.message_time) }}
            </div>
          </div>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>
<script>
import { defineComponent, nextTick, ref, computed, onMounted } from "vue";
import { useChatStore } from "../../../store/chat";
import { formatChatDate } from "../../../utils/utils";

export default defineComponent({
  name: "chat-room",
  setup() {
    const chatStore = useChatStore();
    const messageList = computed(() => chatStore.messageList);
    const menus = ref([]);
    const currentChat = computed(() => chatStore.currentChat);
    const unReadGather = ref({});
    const changeActiveRoom = (currentChat, currentChatType) => {
      chatStore.setCurrentChatAction({ currentChat, currentChatType });
      chatStore.panelStatusAction("chat");
    };
    const handleCommand = () => {};
    const contextMenuItem = ref({});
    // todo 右键菜单
    const beforeMenuClick = (item) => {
      menus.value = [
        {
          command: "close",
          text: "关闭聊天",
        },
        {
          command: "delete",
          text: "删除聊天",
        },
      ];
      if (item.top === 0) {
        menus.value.unshift({
          command: "top",
          text: "置顶",
        });
      } else {
        menus.value.unshift({
          command: "cancelTop",
          text: "取消置顶",
        });
      }
      nextTick(() => {
        contextMenuItem.value = item;
      });
    };
    const menuClick = (item) => {};
    const renderMessageDate = (t) => {
      return formatChatDate(t);
    };
    onMounted(() => {});
    return {
      chatStore,
      messageList,
      menus,
      currentChat,
      unReadGather,
      contextMenuItem,
      changeActiveRoom,
      handleCommand,
      menuClick,
      beforeMenuClick,
      renderMessageDate,
    };
  },
});
</script>
<style lang="less" scoped>
@import url("../wechat.less");
.chat-room {
  height: calc(100% - 60px);
}

.user_list {
  width: 100%;
  .room-card {
    height: 100%;
    padding: 12px;
  }
  .room-active {
    background-color: #c6c5c5;
  }
  .user_head_badge {
    height: 40px;
    width: 40px;
    border-radius: 2px;
    float: left;
  }

  .user_head {
    background: #999;
    height: 40px;
    width: 40px;
    border-radius: 2px;
    float: left;

    img {
      width: 40px;
    }
  }

  .user_name {
    color: #000;
    font-size: 14px;
  }
}

.user_list {
  li {
    width: 100%;
    height: 64px;

    &:hover {
      background: #dedbdb;
    }

    .user_text {
      float: left;
      height: 40px;
      width: 122px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      & > p {
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .user_message {
        color: #999;
        font-size: 12px;
      }
    }

    .user_time {
      float: right;
      color: #999;
      font-size: 12px;
    }
  }

  .user_active {
    background: #dedbdb;
  }
}
</style>